/* border */
.border { background-repeat: no-repeat; }
.border._t { background-image: linear-gradient(180deg, #ddd 50%, transparent 0); background-position: top; background-size: 100% 1px; }
.border._r { background-image: linear-gradient(270deg, #ddd 50%, transparent 0); background-position: right; background-size: 1px 100%; }
.border._b { background-image: linear-gradient(0deg, #ddd 50%, transparent 0); background-position: bottom; background-size: 100% 1px; }
.border._l { background-image: linear-gradient(90deg, #ddd 49%, transparent 0); /* why49? */ background-position: left; background-size: 1px 100%; }
.border._a { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(270deg, #ddd 50%, transparent 0), linear-gradient(0deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: top, right, bottom, left; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
.border._t._r { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(270deg, #ddd 50%, transparent 0); background-position: top, right; background-size: 100% 1px, 1px 100%; }
.border._t._b { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(0deg, #ddd 50%, transparent 0); background-position: top, bottom; background-size: 100% 1px, 100% 1px; }
.border._t._l { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: top, left; background-size: 100% 1px, 1px 100%; }
.border._r._b { background-image: linear-gradient(270deg, #ddd 50%, transparent 0), linear-gradient(0deg, #ddd 50%, transparent 0); background-position: right, bottom; background-size: 1px 100%, 100% 1px; }
.border._r._l { background-image: linear-gradient(270deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: right, left; background-size: 1px 100%, 1px 100%; }
.border._b._l { background-image: linear-gradient(0deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: bottom, left; background-size: 100% 1px, 1px 100%; }
.border._t._r._b { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(270deg, #ddd 50%, transparent 0), linear-gradient(0deg, #ddd 50%, transparent 0); background-position: top, right, bottom; background-size: 100% 1px, 1px 100%, 100% 1px; }
.border._t._r._l { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(270deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: top, right, left; background-size: 100% 1px, 1px 100%, 1px 100%; }
.border._r._b._l { background-image: linear-gradient(270deg, #ddd 50%, transparent 0), linear-gradient(0deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: right, bottom, left; background-size: 1px 100%, 100% 1px, 1px 100%; }
.border._b._l._t { background-image: linear-gradient(180deg, #ddd 50%, transparent 0), linear-gradient(0deg, #ddd 50%, transparent 0), linear-gradient(90deg, #ddd 49%, transparent 0); background-position: top, bottom, left; background-size: 100% 1px, 100% 1px, 1px 100%; }

/* /border */

/* 24栅格
*  offset 栅格左侧的间隔格数
*/
.g-container { overflow-y: auto; overflow-x: hidden; }
.g-row { position: relative; box-sizing: border-box; }
.g-row:after, .g-row:before { display: table; content: ""; }
.g-row:after { clear: both; }
.g-col-1, .g-col-2, .g-col-3, .g-col-4, .g-col-5, .g-col-6, .g-col-7, .g-col-8, .g-col-9, .g-col-10, .g-col-11, .g-col-12, .g-col-13, .g-col-14, .g-col-15, .g-col-16, .g-col-17, .g-col-18, .g-col-19, .g-col-20, .g-col-21, .g-col-22, .g-col-23, .g-col-24 { float: left; box-sizing: border-box; }

/* gutter 2 */
.g-row.gutter-2 { margin-left: -1px; margin-right: -1px; }
.g-row.gutter-2 >.g-col-1, .g-row.gutter-2 >.g-col-2, .g-row.gutter-2 >.g-col-3, .g-row.gutter-2 >.g-col-4, .g-row.gutter-2 >.g-col-5, .g-row.gutter-2 >.g-col-6, .g-row.gutter-2 >.g-col-7, .g-row.gutter-2 >.g-col-8, .g-row.gutter-2 >.g-col-9, .g-row.gutter-2 >.g-col-10, .g-row.gutter-2 >.g-col-11, .g-row.gutter-2 >.g-col-11, .g-row.gutter-2 >.g-col-12, .g-row.gutter-2 >.g-col-13, .g-row.gutter-2 >.g-col-14, .g-row.gutter-2 >.g-col-15, .g-row.gutter-2 >.g-col-16, .g-row.gutter-2 >.g-col-17, .g-row.gutter-2 >.g-col-18, .g-row.gutter-2 >.g-col-19, .g-row.gutter-2 >.g-col-20, .g-row.gutter-2 >.g-col-21, .g-row.gutter-2 >.g-col-22, .g-row.gutter-2 >.g-col-23, .g-row.gutter-2 >.g-col-24 { padding-left: 1px; padding-right: 1px; }

/* /gutter 2 */

/* gutter 4 */
.g-row.gutter-4 { margin-left: -2px; margin-right: -2px; }
.g-row.gutter-4 >.g-col-1, .g-row.gutter-4 >.g-col-2, .g-row.gutter-4 >.g-col-3, .g-row.gutter-4 >.g-col-4, .g-row.gutter-4 >.g-col-5, .g-row.gutter-4 >.g-col-6, .g-row.gutter-4 >.g-col-7, .g-row.gutter-4 >.g-col-8, .g-row.gutter-4 >.g-col-9, .g-row.gutter-4 >.g-col-10, .g-row.gutter-4 >.g-col-11, .g-row.gutter-4 >.g-col-11, .g-row.gutter-4 >.g-col-12, .g-row.gutter-4 >.g-col-13, .g-row.gutter-4 >.g-col-14, .g-row.gutter-4 >.g-col-15, .g-row.gutter-4 >.g-col-16, .g-row.gutter-4 >.g-col-17, .g-row.gutter-4 >.g-col-18, .g-row.gutter-4 >.g-col-19, .g-row.gutter-4 >.g-col-20, .g-row.gutter-4 >.g-col-21, .g-row.gutter-4 >.g-col-22, .g-row.gutter-4 >.g-col-23, .g-row.gutter-4 >.g-col-24 { padding-left: 2px; padding-right: 2px; }

/* /gutter 4 */

/* gutter 6 */
.g-row.gutter-6 { margin-left: -3px; margin-right: -3px; }
.g-row.gutter-6 >.g-col-1, .g-row.gutter-6 >.g-col-2, .g-row.gutter-6 >.g-col-3, .g-row.gutter-6 >.g-col-4, .g-row.gutter-6 >.g-col-5, .g-row.gutter-6 >.g-col-6, .g-row.gutter-6 >.g-col-7, .g-row.gutter-6 >.g-col-8, .g-row.gutter-6 >.g-col-9, .g-row.gutter-6 >.g-col-10, .g-row.gutter-6 >.g-col-11, .g-row.gutter-6 >.g-col-11, .g-row.gutter-6 >.g-col-12, .g-row.gutter-6 >.g-col-13, .g-row.gutter-6 >.g-col-14, .g-row.gutter-6 >.g-col-15, .g-row.gutter-6 >.g-col-16, .g-row.gutter-6 >.g-col-17, .g-row.gutter-6 >.g-col-18, .g-row.gutter-6 >.g-col-19, .g-row.gutter-6 >.g-col-20, .g-row.gutter-6 >.g-col-21, .g-row.gutter-6 >.g-col-22, .g-row.gutter-6 >.g-col-23, .g-row.gutter-6 >.g-col-24 { padding-left: 3px; padding-right: 3px; }

/* /gutter 6 */

/* gutter 8 */
.g-row.gutter-8 { margin-left: -4px; margin-right: -4px; }
.g-row.gutter-8 >.g-col-1, .g-row.gutter-8 >.g-col-2, .g-row.gutter-8 >.g-col-3, .g-row.gutter-8 >.g-col-4, .g-row.gutter-8 >.g-col-5, .g-row.gutter-8 >.g-col-6, .g-row.gutter-8 >.g-col-7, .g-row.gutter-8 >.g-col-8, .g-row.gutter-8 >.g-col-9, .g-row.gutter-8 >.g-col-10, .g-row.gutter-8 >.g-col-11, .g-row.gutter-8 >.g-col-11, .g-row.gutter-8 >.g-col-12, .g-row.gutter-8 >.g-col-13, .g-row.gutter-8 >.g-col-14, .g-row.gutter-8 >.g-col-15, .g-row.gutter-8 >.g-col-16, .g-row.gutter-8 >.g-col-17, .g-row.gutter-8 >.g-col-18, .g-row.gutter-8 >.g-col-19, .g-row.gutter-8 >.g-col-20, .g-row.gutter-8 >.g-col-21, .g-row.gutter-8 >.g-col-22, .g-row.gutter-8 >.g-col-23, .g-row.gutter-8 >.g-col-24 { padding-left: 4px; padding-right: 4px; }

/* /gutter 8 */

/* gutter 10 */
.g-row.gutter-10 { margin-left: -5px; margin-right: -5px; }
.g-row.gutter-10 >.g-col-1, .g-row.gutter-10 >.g-col-2, .g-row.gutter-10 >.g-col-3, .g-row.gutter-10 >.g-col-4, .g-row.gutter-10 >.g-col-5, .g-row.gutter-10 >.g-col-6, .g-row.gutter-10 >.g-col-7, .g-row.gutter-10 >.g-col-8, .g-row.gutter-10 >.g-col-9, .g-row.gutter-10 >.g-col-10, .g-row.gutter-10 >.g-col-11, .g-row.gutter-10 >.g-col-11, .g-row.gutter-10 >.g-col-12, .g-row.gutter-10 >.g-col-13, .g-row.gutter-10 >.g-col-14, .g-row.gutter-10 >.g-col-15, .g-row.gutter-10 >.g-col-16, .g-row.gutter-10 >.g-col-17, .g-row.gutter-10 >.g-col-18, .g-row.gutter-10 >.g-col-19, .g-row.gutter-10 >.g-col-20, .g-row.gutter-10 >.g-col-21, .g-row.gutter-10 >.g-col-22, .g-row.gutter-10 >.g-col-23, .g-row.gutter-10 >.g-col-24 { padding-left: 5px; padding-right: 5px; }

/* /gutter 10 */

/* gutter 12 */
.g-row.gutter-12 { margin-left: -6px; margin-right: -6px; }
.g-row.gutter-12 >.g-col-1, .g-row.gutter-12 >.g-col-2, .g-row.gutter-12 >.g-col-3, .g-row.gutter-12 >.g-col-4, .g-row.gutter-12 >.g-col-5, .g-row.gutter-12 >.g-col-6, .g-row.gutter-12 >.g-col-7, .g-row.gutter-12 >.g-col-8, .g-row.gutter-12 >.g-col-9, .g-row.gutter-12 >.g-col-10, .g-row.gutter-12 >.g-col-11, .g-row.gutter-12 >.g-col-11, .g-row.gutter-12 >.g-col-12, .g-row.gutter-12 >.g-col-13, .g-row.gutter-12 >.g-col-14, .g-row.gutter-12 >.g-col-15, .g-row.gutter-12 >.g-col-16, .g-row.gutter-12 >.g-col-17, .g-row.gutter-12 >.g-col-18, .g-row.gutter-12 >.g-col-19, .g-row.gutter-12 >.g-col-20, .g-row.gutter-12 >.g-col-21, .g-row.gutter-12 >.g-col-22, .g-row.gutter-12 >.g-col-23, .g-row.gutter-12 >.g-col-24 { padding-left: 6px; padding-right: 6px; }

/* /gutter 12 */

/* gutter 14 */
.g-row.gutter-14 { margin-left: -7px; margin-right: -7px; }
.g-row.gutter-14 >.g-col-1, .g-row.gutter-14 >.g-col-2, .g-row.gutter-14 >.g-col-3, .g-row.gutter-14 >.g-col-4, .g-row.gutter-14 >.g-col-5, .g-row.gutter-14 >.g-col-6, .g-row.gutter-14 >.g-col-7, .g-row.gutter-14 >.g-col-8, .g-row.gutter-14 >.g-col-9, .g-row.gutter-14 >.g-col-10, .g-row.gutter-14 >.g-col-11, .g-row.gutter-14 >.g-col-11, .g-row.gutter-14 >.g-col-12, .g-row.gutter-14 >.g-col-13, .g-row.gutter-14 >.g-col-14, .g-row.gutter-14 >.g-col-15, .g-row.gutter-14 >.g-col-16, .g-row.gutter-14 >.g-col-17, .g-row.gutter-14 >.g-col-18, .g-row.gutter-14 >.g-col-19, .g-row.gutter-14 >.g-col-20, .g-row.gutter-14 >.g-col-21, .g-row.gutter-14 >.g-col-22, .g-row.gutter-14 >.g-col-23, .g-row.gutter-14 >.g-col-24 { padding-left: 7px; padding-right: 7px; }

/* /gutter 14 */

/* gutter 16 */
.g-row.gutter-16 { margin-left: -8px; margin-right: -8px; }
.g-row.gutter-16 >.g-col-1, .g-row.gutter-16 >.g-col-2, .g-row.gutter-16 >.g-col-3, .g-row.gutter-16 >.g-col-4, .g-row.gutter-16 >.g-col-5, .g-row.gutter-16 >.g-col-6, .g-row.gutter-16 >.g-col-7, .g-row.gutter-16 >.g-col-8, .g-row.gutter-16 >.g-col-9, .g-row.gutter-16 >.g-col-10, .g-row.gutter-16 >.g-col-11, .g-row.gutter-16 >.g-col-11, .g-row.gutter-16 >.g-col-12, .g-row.gutter-16 >.g-col-13, .g-row.gutter-16 >.g-col-14, .g-row.gutter-16 >.g-col-15, .g-row.gutter-16 >.g-col-16, .g-row.gutter-16 >.g-col-17, .g-row.gutter-16 >.g-col-18, .g-row.gutter-16 >.g-col-19, .g-row.gutter-16 >.g-col-20, .g-row.gutter-16 >.g-col-21, .g-row.gutter-16 >.g-col-22, .g-row.gutter-16 >.g-col-23, .g-row.gutter-16 >.g-col-24 { padding-left: 8px; padding-right: 8px; }

/* /gutter 16 */

/* gutter 18 */
.g-row.gutter-18 { margin-left: -9px; margin-right: -9px; }
.g-row.gutter-18 >.g-col-1, .g-row.gutter-18 >.g-col-2, .g-row.gutter-18 >.g-col-3, .g-row.gutter-18 >.g-col-4, .g-row.gutter-18 >.g-col-5, .g-row.gutter-18 >.g-col-6, .g-row.gutter-18 >.g-col-7, .g-row.gutter-18 >.g-col-8, .g-row.gutter-18 >.g-col-9, .g-row.gutter-18 >.g-col-10, .g-row.gutter-18 >.g-col-11, .g-row.gutter-18 >.g-col-11, .g-row.gutter-18 >.g-col-12, .g-row.gutter-18 >.g-col-13, .g-row.gutter-18 >.g-col-14, .g-row.gutter-18 >.g-col-15, .g-row.gutter-18 >.g-col-16, .g-row.gutter-18 >.g-col-17, .g-row.gutter-18 >.g-col-18, .g-row.gutter-18 >.g-col-19, .g-row.gutter-18 >.g-col-20, .g-row.gutter-18 >.g-col-21, .g-row.gutter-18 >.g-col-22, .g-row.gutter-18 >.g-col-23, .g-row.gutter-18 >.g-col-24 { padding-left: 9px; padding-right: 9px; }

/* /gutter 18 */

/* gutter 20 */
.g-row.gutter-20 { margin-left: -10px; margin-right: -10px; }
.g-row.gutter-20 >.g-col-1, .g-row.gutter-20 >.g-col-2, .g-row.gutter-20 >.g-col-3, .g-row.gutter-20 >.g-col-4, .g-row.gutter-20 >.g-col-5, .g-row.gutter-20 >.g-col-6, .g-row.gutter-20 >.g-col-7, .g-row.gutter-20 >.g-col-8, .g-row.gutter-20 >.g-col-9, .g-row.gutter-20 >.g-col-10, .g-row.gutter-20 >.g-col-11, .g-row.gutter-20 >.g-col-11, .g-row.gutter-20 >.g-col-12, .g-row.gutter-20 >.g-col-13, .g-row.gutter-20 >.g-col-14, .g-row.gutter-20 >.g-col-15, .g-row.gutter-20 >.g-col-16, .g-row.gutter-20 >.g-col-17, .g-row.gutter-20 >.g-col-18, .g-row.gutter-20 >.g-col-19, .g-row.gutter-20 >.g-col-20, .g-row.gutter-20 >.g-col-21, .g-row.gutter-20 >.g-col-22, .g-row.gutter-20 >.g-col-23, .g-row.gutter-20 >.g-col-24 { padding-left: 10px; padding-right: 10px; }

/* /gutter 20 */
.g-col-1 { width: 4.16667%; }
.g-col-offset-1 { margin-left: 4.16667%; }
.g-col-2 { width: 8.33333%; }
.g-col-offset-2 { margin-left: 8.33333%; }
.g-col-3 { width: 12.5%; }
.g-col-offset-3 { margin-left: 12.5%; }
.g-col-4 { width: 16.66667%; }
.g-col-offset-4 { margin-left: 16.66667%; }
.g-col-5 { width: 20.83333%; }
.g-col-offset-5 { margin-left: 20.83333%; }
.g-col-6 { width: 25%; }
.g-col-offset-6 { margin-left: 25%; }
.g-col-7 { width: 29.16667%; }
.g-col-offset-7 { margin-left: 29.16667%; }
.g-col-8 { width: 33.33333%; }
.g-col-offset-8 { margin-left: 33.33333%; }
.g-col-9 { width: 37.5%; }
.g-col-offset-9 { margin-left: 37.5%; }
.g-col-10 { width: 41.66667%; }
.g-col-offset-10 { margin-left: 41.66667%; }
.g-col-11 { width: 45.83333%; }
.g-col-offset-11 { margin-left: 45.83333%; }
.g-col-12 { width: 50%; }
.g-col-offset-12 { margin-left: 50%; }
.g-col-13 { width: 54.16667%; }
.g-col-offset-13 { margin-left: 54.16667%; }
.g-col-14 { width: 58.33333%; }
.g-col-offset-14 { margin-left: 58.33333%; }
.g-col-15 { width: 62.5%; }
.g-col-offset-15 { margin-left: 62.5%; }
.g-col-16 { width: 66.66667%; }
.g-col-offset-16 { margin-left: 66.66667%; }
.g-col-17 { width: 70.83333%; }
.g-col-offset-17 { margin-left: 70.83333%; }
.g-col-18 { width: 75%; }
.g-col-offset-18 { margin-left: 75%; }
.g-col-19 { width: 79.16667%; }
.g-col-offset-19 { margin-left: 79.16667%; }
.g-col-20 { width: 83.33333%; }
.g-col-offset-20 { margin-left: 83.33333%; }
.g-col-21 { width: 87.5%; }
.g-col-offset-21 { margin-left: 87.5%; }
.g-col-22 { width: 91.66667%; }
.g-col-offset-22 { margin-left: 91.66667%; }
.g-col-23 { width: 95.83333%; }
.g-col-offset-23 { margin-left: 95.83333%; }